might be a little annoying, but if you can set this up to use RouterLink components (from vue-router) then it will enable right click to open in a new tab.

Ah, yeah that's a good call

Can't make that happen until this tailwindlabs/headlessui#1680 fix gets bundled into a release for headless UI (or we could pull headless ui directly from github instead of the npm package). It's the source of a few glitches in the app currently that I was very confused about until I realized that the tab group is not in fact acting as a controlled component.

Ah shoot. Headless ui is pretty neat and useful in some places, but definitely causes some problems in others… might want to ditch it for tabs in favor of something we build.

one more thing - in the past I've set up a router hook/guard to automatically cast the props numbers where appropriate. Just removes some annoying code on routes where we are using it...

router.beforeEach(async (to, from, next) => {
  // automatically cast any integer params into proper integers
  // so that components can set params to expect a Number
  // NOTE - this is so that when we user router link or programatically navigate
  // that we can set the param as an int
  if (to.params) {
    const castNumericParams = _.mapValues(to.params, (val) => {
      if (parseInt(val).toString() === val) return parseInt(val);
      return val;
    });
    if (_.isEqual(castNumericParams, to.params)) return next();
    return next({
      ...to,
      params: castNumericParams,
    });
  }

  return next();
});